<template>
  <div class="my-table">
    <div class="board_sum_title">{{ resForm.docTitle }}</div>
    <div class="board_sum_tips">{{ resForm.docSubtitle }}</div>
    <van-row class="my-row" v-for="(item, index) in dataList" :key="index">
      <van-col :span="Number(li.span)" class="my-col" v-for="(li, j) in item" :key="j">
        <template v-if="li.tag === 'text'">
          <div class="label" v-html="li.lable"></div>
          <div :class="routerQuery.recordType == '01-05' ? 'val' : 'val-data'">
            {{ li.defaultValue }}
          </div>
        </template>

        <template v-if="li.tag === 'input'">
          <div class="label" v-html="li.lable"></div>
          <div class="val-sign">
            <van-field
              v-if="!disabled"
              class="scroe_input"
              v-model="form[li.vModel]"
              :rows="li.rows"
              autosize
              type="textarea"
              :placeholder="'请输入'"
              @change="inputChange" />
            <div v-if="disabled" class="detail_sum pre_line" v-html="removeHtmlStyle(form[li.vModel])"></div>
            <p class="sum_table_day" v-if="li.autograph">
              {{ li.autograph }}
            </p>
          </div>
        </template>

        <template v-if="li.tag === 'sign'">
          <div class="label" v-html="li.lable"></div>
          <div class="val-sign">
            <p class="no_data_sum"></p>
            <p class="sum_table_day" v-if="li.autograph">
              {{ li.autograph }}
            </p>
          </div>
        </template>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { getTemplateByCode } from '@api/api-documentary.js'
export default {
  name: 'MyTable',
  components: {},
  props: {
    tableForm: {
      type: Object,
      default: () => {
        return {}
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataList: [
        /**
          {
            // 默认值
            defaultValue: '丁勇',
            // 显示
            lable: '姓名',
            // 暂无用
            layout: 'col',
            // 处于那一行
            lines: 1,
            // 输入框占位符
            placeholder: '',
            // 是否是必填
            required: 'false',
            // key+value 所在宽度（全部24）
            span: 8,
            // 标签类型：text：文本；input：输入框；sign：占位高度
            tag: 'text',
            // 绑定值的key(form属性中的key值)
            vModel: '',
          },
         *
         */
      ],
      resForm: {},
      form: {},
      routerQuery: {},
      formName: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.routerQuery = this.$route.query
    this.getPageDate()
  },
  methods: {
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
        newHtml = html.replace(/\n/g, '<br/>')
      }
      return newHtml
    },
    getPageDate() {
      getTemplateByCode({
        tempCode: this.routerQuery.tempCode,
        params: this.routerQuery,
      })
        .then(result => {
          this.resForm = result.data
          this.setData(result.data.docTemp)
        })
        .catch(err => {
          console.log(err)
        })
    },
    inputChange() {
      this.$emit('dataChange', this.form, this.formName)
    },
    setData(arr) {
      const data = []
      const form = {}
      const formName = []
      let colIndex = ''
      arr.forEach(item => {
        if (colIndex !== item.lines) {
          data.push([])
        }
        colIndex = item.lines
        data[colIndex - 1].push(item)

        if (item.tag === 'input') {
          form[item.vModel] = item.defaultValue
        }
        if (item.required === 'true') {
          formName.push({ id: item.vModel, name: item.placeholder })
        }
      })

      this.dataList = data
      this.form = form
      this.formName = formName
      this.$emit('dataChange', this.form, this.formName)
    },
    sumbitForm1(data) {
      console.log('sumbitForm1提交数据：', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.my-table {
  padding: 15px 10px;
  .board_sum_title {
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
  }
  .board_sum_tips {
    font-size: 13px;
    text-align: center;
    padding-bottom: 5px;
    line-height: 25px;
  }
  .my-row {
    display: flex;
    border: 1px solid #ccc;
    &:not(:last-child) {
      border-bottom: 0;
    }
    .my-col {
      display: flex;
      &:last-child {
        .val {
          border-right: 0;
        }
        .val-data {
          border-right: 0;
        }
      }
      .label,
      .val {
        text-align: center;
        padding: 2px;
      }
      .label {
        width: 40px;
        border-right: 1px solid #ccc;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .val-sign {
        flex: 1;
        border-right: 1px solid #ccc;
      }
      .val {
        flex: 1;
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .val-data {
        flex: 1;
        text-align: left;
        display: flex;
        align-items: center;
        padding-left: 10px;
        color: #606266;
        padding-left: 10px;
        border-right: 1px solid #ccc;
      }
      .no_data_sum {
        min-height: 70px;
        height: calc(100% - 30px);
        width: 100%;
        margin-bottom: 10px;
      }
      .sum_table_day {
        text-align: right;
        padding-right: 10px;
        height: 30px;
        color: #a7a7a7;
        white-space: pre;
        margin-top: 10px;
        span {
          padding: 0 15px;
        }
        :nth-child(1) {
          padding-left: 30px;
        }
      }
      .scroe_input {
        padding: 0 5px;
        width: 100%;
        height: auto;
        line-height: 21px;
        font-size: 12px;
        resize: none;
      }
    }
    .detail_sum {
      background-color: #fff;
      color: #606266;
      line-height: 1.5;
      text-align: left;
      padding-left: 10px;
      user-select: text;
      -webkit-user-select: text;
    }
  }
}
</style>
